<!-- 库存盘点 -->
<template>
  <div class="app-container">
    <el-form
      class="globalSerchFormStyle"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="110px"
      label-position="right"
    >
      <el-row style="margin-top: 15px">
        <el-col :span="6">
          <el-form-item
            label="盘点仓库/门店"
            prop="stationId"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择调出仓库/门店"
              style="width: 200px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="审核状态"
            prop="reviewStatus"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.reviewStatus"
              :clearable="true"
              filterable
              placeholder="请选择审核状态"
              style="width: 200px"
            >
              <el-option label="未审核" value="0"></el-option>
              <el-option label="已通过" value="1"></el-option>
              <el-option label="未通过" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="盘点单号" prop="batchNo" clearable size="small">
            <el-input
              style="width: 200px"
              v-model="queryParams.batchNo"
              placeholder="请输入盘点单号"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="盘点日期" prop="debuggeratetimeRange">
            <el-date-picker
              v-model="debuggeratetimeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              size="small"
              style="width: 200px"
              @change="createDateTimeChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleQuery" size="mini"
          >查询</el-button
        >
      </el-col>
      <el-col style="padding-left: 10px" :span="1.5">
        <el-button type="primary" size="mini" @click="resetQuery" plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="onAdd" size="mini"
          >新增盘点</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button @click="handleExport" size="mini" plain
          >导出</el-button
        ></el-col
      >
    </el-row>
    <el-table
      style="width: 100%"
      :data="warehouseList"
      v-loading="loading"
      header-align="left"
      border
    >
      <el-table-column type="index" label="序号" align="left" width="60" />
      <el-table-column
        label="盘点单号"
        align="left"
        prop="batchNo"
        width="180"
      />
      <el-table-column label="盘点仓库/门店" align="left" prop="stationName" />
      <el-table-column label="审核意见" align="left">无</el-table-column>
      <el-table-column label="审核状态" align="left" prop="reviewStatus">
        <template slot-scope="scope">
          {{ scope.row.reviewStatus == 0 ? "未审核" : "" }}
          {{ scope.row.reviewStatus == 1 ? "已通过" : "" }}
          {{ scope.row.reviewStatus == 2 ? "未通过" : "" }}
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="left" prop="operator" />
      <el-table-column label="审核人" align="left" prop="reviewerName" />
      <el-table-column
        label="盘点时间"
        align="left"
        prop="inventoryTime"
        width="180"
      />
      <el-table-column
        fixed="right"
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="80px"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="onDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailsDialogVisible" width="60%">
      <el-row class="row-div">
        <el-col :span="8"
          >盘点仓库/门店：{{ inventoryDetail.stationName }}</el-col
        >
        <el-col :span="8">盘点单号：{{ inventoryDetail.batchNo }}</el-col>
        <el-col :span="8">盘点日期：{{ inventoryDetail.inventoryTime }}</el-col>
      </el-row>

      <el-row class="row-div">
        <el-col :span="8"
          >审核状态： {{ inventoryDetail.reviewStatus == 0 ? "未审核" : "" }}
          {{ inventoryDetail.reviewStatus == 1 ? "已通过" : "" }}
          {{ inventoryDetail.reviewStatus == 2 ? "未通过" : "" }}</el-col
        >
        <el-col :span="8">操作人：{{ inventoryDetail.operator }}</el-col>
        <el-col :span="8">审核人：{{ inventoryDetail.reviewerName }}</el-col>
      </el-row>

      <div style="height: 289px; overflow: auto">
        <el-table
          :data="inventoryDetail.list"
          border
          style="margin-bottom: 50px"
        >
          <el-table-column
            property="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column
            property="commodityName"
            label="商品名称"
          ></el-table-column>
          <el-table-column
            property="barCode"
            label="商品条码"
            width="150"
          ></el-table-column>
          <el-table-column
            property="categoryName"
            label="商品分类"
          ></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <el-table-column
            property="inventoryNum"
            label="盘点数量"
          ></el-table-column>
          <el-table-column
            property="originalNum"
            label="系统数量"
          ></el-table-column>
          <el-table-column
            property="differenceNum"
            label="差异数量"
          ></el-table-column>
          <el-table-column property="status" label="状态">
            <template slot-scope="scope">
              {{ scope.row.status == "0" ? "账实相符" : "" }}
              {{ scope.row.status == "1" ? "盘盈" : "" }}
              {{ scope.row.status == "2" ? "盘亏" : "" }}
            </template>
          </el-table-column>
          <el-table-column
            property="notes"
            label="备注"
            width="150"
          ></el-table-column>
        </el-table>
      </div>

      <div class="center-div">
        <el-button type="primary" size="small" @click="detailsClose"
          >关闭</el-button
        >
      </div>
    </el-dialog>

    <AddStockCount :addDialogVisible.sync="addDialogVisible"></AddStockCount>
  </div>
</template>

<script>
import AddStockCount from "./addStockCount.vue";
import { getRepository } from "@/api/nonOil/putlntoStorage";
import { batchList, batchExport, detailsList } from "@/api/nonOil/goods";

export default {
  name: "StockCount",
  components: { AddStockCount },
  data() {
    return {
      // 油站
      stationList: [],
      // 盘点时间
      debuggeratetimeRange: null,

      queryParams: {
        // 盘点仓库/门店
        stationId: null,
        // 审核状态
        reviewStatus: null,
        // 盘点单号
        batchNo: null,
        // 盘点时间
        beginTime: null,
        endTime: null,

        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,

      //表格数据
      warehouseList: [],

      //新增调拨单
      addDialogVisible: false,

      // 详情
      detailsDialogVisible: false,
      inventoryDetail: {},
    };
  },
  created() {
    this.getStationList();
    this.handleQuery();
  },
  methods: {
    // 查询油站
    getStationList() {
      const enterpriseId = this.presentEnterprise?.enterpriseId
        ? this.presentEnterprise.enterpriseId
        : null;
      getRepository({ enterpriseId }).then((res) => {
        this.stationList = res;
      });
    },

    // 选择盘点时间
    createDateTimeChange() {
      this.queryParams.beginTime = this.debuggeratetimeRange
        ? this.debuggeratetimeRange[0]
        : null;
      this.queryParams.endTime = this.debuggeratetimeRange
        ? this.debuggeratetimeRange[1]
        : null;
    },

    // 搜索
    handleQuery() {
      this.loading = true;
      const beginTime = this.queryParams.beginTime
        ? this.queryParams.beginTime + " " + "00:00:00"
        : null;
      const endTime = this.queryParams.endTime
        ? this.queryParams.endTime + " " + "23:59:59"
        : null;
      const queryParams = {
        ...this.queryParams,
        beginTime,
        endTime,
      };
      batchList(queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.total = res.total;
            this.warehouseList = res.rows;
          } else {
            this.msgError(es.msg);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 重置
    resetQuery() {
      // 创建时间
      this.debuggeratetimeRange = null;
      this.queryParams.beginTime = null;
      this.queryParams.endTime = null;

      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },

    // 新增调拨单
    onAdd() {
      this.addDialogVisible = true;
    },

    /** 导出按钮操作 */
    handleExport() {
      const beginTime = this.queryParams.beginTime
        ? this.queryParams.beginTime + " " + "00:00:00"
        : null;
      const endTime = this.queryParams.endTime
        ? this.queryParams.endTime + " " + "23:59:59"
        : null;
      const queryParams = {
        ...this.queryParams,
        beginTime,
        endTime,
      };
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return batchExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 详情
    onDetails(row) {
      this.detailsDialogVisible = true;
      detailsList(row.id).then((res) => {
        this.inventoryDetail = row;

        this.inventoryDetail.list = res.data;

        this.inventoryDetail.list.forEach((item, index) => {
          if (this.inventoryDetail.list.length - 1 == index) {
            item.index = "合计";
          } else {
            item.index = index + 1;
          }
        });
      });
    },

    // 关闭详情
    detailsClose() {
      this.detailsDialogVisible = false;
    },
  },
  watch: {
    addDialogVisible: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (oldVal) {
          this.handleQuery();
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
.row-div {
  font-size: 15px;
  margin-bottom: 20px;
}

.center-div {
  text-align: center;
}
.app-container {
  .swich {
    ::v-deep.el-switch__core {
      height: 30px;
      border-radius: 12.5px;
    }

    ::v-deep .el-switch__core:after {
      top: 6px;
    }

    ::v-deep .el-switch__label * {
      position: absolute;
      right: 35px;
      top: 2px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
